<template>
    <div class="container">
      <!-- 下部内容区（去除上部工具栏，内容区填满） -->
      <div class="content">
        <!-- 左侧区域 -->
        <div class="left-panel">
          <div class="panel-header">分类列表</div>
          <div class="panel-content">
            <div class="folder-list">
              <div class="folder-items">
                <div v-for="folder in folders" :key="folder.id" class="folder-item" :class="{ 'active': currentFolderId === folder.id }">
                  <div class="folder-info" @click="handleFolderClick(folder.id)">
                    <div class="folder-icon">
                      <el-icon><Folder /></el-icon>
                    </div>
                    <div class="folder-details">
                      <div class="folder-name">{{ folder.name }}</div>
                      <div class="folder-count">{{ folder.num }}个素材</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 右侧区域 -->
        <div class="right-panel">
          <div class="panel-header">
            <span>数字人列表</span>
            <!-- 工具栏 -->
            <div class="toolbar-actions">
              <el-button type="success" class="custom-button" @click="handleUpload">
                <el-icon><Upload /></el-icon>
                本地上传
              </el-button>
              <el-button @click="handleSure" circle class="action-btn" title="确定">
                <el-icon>
                  <Check />
                </el-icon>
              </el-button>
              <el-button @click="handleRefresh" circle class="action-btn" title="刷新">
                <el-icon><Refresh /></el-icon>
              </el-button>
              <el-button @click="handleViewSwitch" circle class="action-btn" :title="isTableView ? '切换为图片视图' : '切换为表格视图'">
                <el-icon><Operation /></el-icon>
              </el-button>
            </div>
          </div>
          <div class="panel-content">
            <!-- 内容区域 -->
            <div class="content-area">
              <!-- 表格视图 -->
              <el-table
                v-if="isTableView"
                ref="materialTable"
                :data="materials"
                class="custom-table"
                :header-row-class-name="props.multiple ? '' : 'disable-select-all'"
                @select="handleTableSelect"
                :row-key="row => row.id"
                border
              >
                <el-table-column type="selection" width="50" />
                <el-table-column prop="title" label="素材名" min-width="120">
                  <template #default="scope">
                    <div class="material-title">
                      <img :src="scope.row.url_image || ''" alt="thumb" class="material-thumb" />
                      <span>{{ scope.row.title }}</span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="duration" label="时长" min-width="80">
                  <template #default="scope">
                    <span class="duration-tag">{{ Number(scope.row.duration).toFixed(2) }}</span>
                  </template>
                </el-table-column>
              </el-table>
              <!-- 图片视图 -->
              <div v-else class="grid-view">
                <div v-for="item in materials" :key="item.id"
                  class="material-card"
                  :class="{ 'selected': selectedMaterials.includes(item) }"
                  @click="handleImageCardClick(item)"
                >
                  <el-checkbox
                    :model-value="selectedMaterials.includes(item)"
                    @change="checked => handleImageSelectChange(item, checked)"
                    @click.stop
                    class="material-checkbox"
                  />
                  <div class="material-preview">
                    <img :src="item.url_image || ''" alt="thumb" />
                    <div class="duration-overlay">{{ Number(item.duration).toFixed(2) }}</div>
                  </div>
                  <div class="material-info">
                    <div class="material-title">{{ item.title }}</div>
                  </div>
                </div>
              </div>
            </div>
            <!-- 分页 -->
            <div class="pagination-bar">
              <el-pagination
                background
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalCount"
                :page-size="pageSize"
                :current-page="currentPage"
                @current-change="handlePageChange"
                @size-change="handleSizeChange"
                :page-sizes="[10,20,50,100]"
                class="custom-pagination"
              />
            </div>
          </div>
        </div>
      </div>

      <!-- 隐藏的上传组件 -->
      <el-upload
        ref="uploadRef"
        :http-request="customUpload"
        :show-file-list="false"
        :accept="'video/*'"
        :auto-upload="true"
        :with-credentials="false"
        :on-success="handleUploadSuccess"
        :on-error="handleUploadError"
        :before-upload="beforeUpload"
        multiple
        style="display: none;"
      />
    </div>
  </template>

  <script setup lang="ts">
  import { ref, onMounted } from 'vue'
  import {
    Search,
    Position,
    FolderAdd,
    Delete,
    Upload,
    Files,
    Refresh,
    Operation,
    Folder,
    Check
  } from '@element-plus/icons-vue'
  import axiosUtil from '../../axios-util/axios-util'
import utils from '../../utils/utils';
  import LocalStorageUtil from '../../utils/LocalStorageUtil'
  import { ElMessage } from 'element-plus'

  const props = defineProps({
    // 是否支持多选
    multiple: {
      type: Boolean,
      default: false,
    }
  })

  //主题控制light  dark
  const theme = utils.getTheme();
  const searchText = ref('')
  const folders = ref([])
  const materials = ref([])
  const selectedMaterials = ref<any[]>([])
  const currentPage = ref(1)
  const pageSize = ref(10)
  const totalCount = ref(0)
  const isTableView = ref(true)
  let currentFolderId = ref(0)
  const materialTable = ref(null);
  const uploadRef = ref()

  onMounted(() => {
    initFolders()
  })

  const initFolders = async () => {
    const response = await axiosUtil.post('api/buiattach/categoryList', {
      agentid: '0',
      fl_type:2,
      mimetype: 'video',
      storeid: LocalStorageUtil.get("id"),
    })
    if (response.data.code === 1 && response.data.data) {
      folders.value = response.data.data.rows
      initMaterials(response.data.data.rows[0].id)
    }
  }

  const initMaterials = async (id?: number) => {
    if (typeof id === 'number') {
      currentFolderId.value = id
    }
    const folderId = typeof id === 'number' ? id : currentFolderId.value
    const response = await axiosUtil.post('api/attachment/selectaliy', {
      agentid: '0',
      categoryid: folderId,
      fl_type: '2',
      limit: pageSize.value,
      mimetype: 'video',
      offset: currentPage.value,
      order:'desc',
      searchtitle: '',
      op: '7B%22mimetype%22%3A%22LIKE%22%7D',
    })
    if (response.data.code === 1 && response.data.data) {
      materials.value = response.data.data.data
      totalCount.value = response.data.data.totalCount
    }
  }

  const handleFolderClick = (id: number) => {
    currentPage.value = 1
    initMaterials(id)
  }

  const handleRefresh = () => {
    initMaterials()
  }

  const handleSure = () => {
    // 触发事件通知父组件
    emit('confirm')
  }

  const emit = defineEmits(['confirm'])

  const handleViewSwitch = () => {
    isTableView.value = !isTableView.value
  }

  const handleTableSelect = (selection, row) => {
    if (!props.multiple) {
      if (selection.includes(row)) {
        materialTable.value.clearSelection()
        materialTable.value.toggleRowSelection(row, true)
        selectedMaterials.value = [row]
      } else {
        selectedMaterials.value = []
      }
    }
  }

  const handleImageSelectChange = (item: any, checked: boolean) => {
    if (props.multiple) {
      if (checked) {
        if (!selectedMaterials.value.includes(item)) {
          selectedMaterials.value.push(item)
        }
      } else {
        const idx = selectedMaterials.value.indexOf(item)
        if (idx !== -1) {
          selectedMaterials.value.splice(idx, 1)
        }
      }
    } else {
      if (checked) {
        selectedMaterials.value = [item]
      } else {
        selectedMaterials.value = []
      }
    }
  }

  const handleImageCardClick = (item: any) => {
    if (props.multiple) {
      const idx = selectedMaterials.value.indexOf(item)
      if (idx === -1) {
        selectedMaterials.value.push(item)
      } else {
        selectedMaterials.value.splice(idx, 1)
      }
    } else {
      selectedMaterials.value = [item];
    }
  }

  const handlePageChange = (page: number) => {
    currentPage.value = page
    initMaterials()
  }

  const handleSizeChange = (size: number) => {
    pageSize.value = size
    initMaterials()
  }

  const handleMove = () => {
    // 处理素材移动
  }

  const handleNewFolder = () => {
    // 处理新建文件夹
  }

  const handleDelete = () => {
    // 处理删除
  }

  // 本地上传功能
  const handleUpload = () => {
    // 触发el-upload的文件选择
    uploadRef.value?.$el.querySelector('input').click()
  }

  // 自定义上传方法
  const customUpload = async (option: any) => {
    try {
      // 1. 请求后端获取OSS签名URL
      const res = await axiosUtil.post('api/filests/upload_ai', {
        type: option.file.type,
        name: option.file.name,
        size: option.file.size,
        fl_type: '2'
      });
      const ossUrl = res.data; // 假设后端返回的就是OSS上传地址

      // 2. 用fetch PUT文件到OSS
      await fetch(ossUrl, {
        method: 'PUT',
        body: option.file,
        headers: {
          'Content-Type': option.file.type
        }
      });

      // 3. 上传成功后调用回调接口
      const resp = await axiosUtil.post('api/filests/upload_ai_callback', {
        categoryid: currentFolderId.value,
        fl_type: '2',
        type: option.file.type,
        name: option.file.name,
        size: option.file.size,
        storeid: LocalStorageUtil.get("id"),
        url: ossUrl
      });

      if (resp.data.code === 1) {
        ElMessage.success(`${option.file.name} 上传成功`);
        // 上传成功后刷新列表
        await refreshAfterUpload();
      } else {
        throw new Error('上传回调失败');
      }

      // 4. 通知el-upload上传成功
      option.onSuccess({}, option.file);
    } catch (error) {
      ElMessage.error(`${option.file.name} 上传失败: ${error.message}`);
      option.onError(error, option.file);
    }
  };

  // 文件上传前的验证
  const beforeUpload = (file: File) => {
    // 检查文件类型
    const isVideo = file.type.startsWith('video/');
    if (!isVideo) {
      ElMessage.error('只能上传视频文件!');
      return false;
    }

    // 检查文件大小 (例如限制为500MB)
    const isLt500M = file.size / 1024 / 1024 < 500;
    if (!isLt500M) {
      ElMessage.error('视频大小不能超过 500MB!');
      return false;
    }

    return true;
  };

  // 上传错误处理
  const handleUploadError = (error: any, file: File) => {
    console.error('Upload error:', error);
    ElMessage.error(`${file.name} 上传失败`);
  };

  const handleUploadSuccess = () => {
    // 上传成功后的处理已在customUpload中完成
  }

  // 刷新列表
  const refreshAfterUpload = async () => {
    const prevFolderId = currentFolderId.value;
    await initFolders();

    const found = folders.value.find((folder: any) => folder.id === prevFolderId);
    if (found) {
      currentFolderId.value = found.id;
    } else if (folders.value.length > 0) {
      currentFolderId.value = folders.value[0].id;
    }
    await initMaterials(currentFolderId.value);
  };

  const handleAllMaterials = () => {
    // 处理全部素材
  }

  const handleSearch = () => {
    // 处理搜索
  }

  const getSelectMateria = () => {
    return selectedMaterials.value[0]?.url;
  }

  const getSelectMateriaAll = () => {
    return selectedMaterials.value[0];
  }

  defineExpose({
    getSelectMateria,
    getSelectMateriaAll
  })
  </script>

  <style scoped>
  .container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: transparent;
    padding: 16px;
    gap: 16px;
    box-sizing: border-box;
    overflow: hidden;
    --el-text-color-regular: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.8)" : "#fff"');
    --el-text-color-primary: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.8)" : "#fff"');
    --el-fill-color-light: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.4)" : "rgba(255, 255, 255, 0.4)"');
  }

  .content {
    flex: 1;
    display: flex;
    gap: 16px;
    min-height: 0;
    overflow: hidden;
  }

  .left-panel, .right-panel {
    background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(255, 255, 255, 0.3)"');
    border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.4)"');
    border-radius: 12px;
    box-shadow: 0 0 20px v-bind('theme === "light" ? "rgba(0, 0, 0, 0.1)" : "rgba(0, 0, 0, 0.3)"');
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
  }

  .left-panel {
    width: 20%;
    padding: 0 8px;
  }

  .right-panel {
    width: 80%;
    display: flex;
    flex-direction: column;
  }

  .panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 8px;
    border-bottom: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.4)"');
    color: v-bind('theme === "light" ? "#333" : "#fff"');
    font-size: 1.1em;
    font-weight: bold;
  }

  .panel-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
  }

  .toolbar-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
  }

  /* 自定义按钮样式 */
  .custom-button {
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
  }

  .content-area {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    min-height: 0;
  }

  .pagination-bar {
    padding: 16px;
    background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(255, 255, 255, 0.3)"');
    border-top: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.4)"');
    display: flex;
    justify-content: flex-end;
    position: relative;
    z-index: 10;
    flex-shrink: 0;
  }

  /* 修改滚动条样式 */
  .content-area::-webkit-scrollbar {
    width: 6px;
    background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(255, 255, 255, 0.2)"');
  }

  .content-area::-webkit-scrollbar-thumb {
    background: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.3)" : "rgba(255, 255, 255, 0.3)"');
    border-radius: 3px;
  }

  .content-area::-webkit-scrollbar-thumb:hover {
    background: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.4)" : "rgba(255, 255, 255, 0.4)"');
  }

  .content-area::-webkit-scrollbar-track {
    background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(255, 255, 255, 0.2)"');
    border-radius: 3px;
    border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.4)"');
  }

  /* 左侧面板样式优化 */
  .folder-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 0;
    background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(255, 255, 255, 0.3)"');
  }

  .folder-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 4px;
  }

  .folder-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px;
    border-radius: 6px;
    background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(255, 255, 255, 0.3)"');
    border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.4)"');
    transition: all 0.3s ease;
    cursor: pointer;
    margin: 0 8px;
  }

  .folder-item:hover {
    background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.4)"');
    transform: translateX(4px);
    border-color: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.3)" : "rgba(255, 255, 255, 0.5)"');
    box-shadow: 0 0 15px v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(255, 0, 0, 0.3)"');
  }

  .folder-item.active {
    background: v-bind('theme === "light" ? "rgba(64, 158, 255, 0.2)" : "rgba(64, 158, 255, 0.3)"');
    border-color: v-bind('theme === "light" ? "rgba(64, 158, 255, 0.5)" : "rgba(64, 158, 255, 0.6)"');
    box-shadow: 0 0 20px v-bind('theme === "light" ? "rgba(64, 158, 255, 0.2)" : "rgba(64, 158, 255, 0.3)"');
  }

  .folder-info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
  }

  .folder-icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 170, 255, 0.2);
    border-radius: 6px;
    color: #00aaff;
  }

  .folder-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    overflow: hidden;
  }

  .folder-name {
    color: v-bind('theme === "light" ? "#333" : "#fff"');
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .folder-count {
    color: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.6)" : "rgba(255, 255, 255, 0.6)"');
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* 右侧面板样式优化 */
  .action-btn {
    background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(255, 255, 255, 0.3)"') !important;
    border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.4)"') !important;
    color: v-bind('theme === "light" ? "#333" : "#fff"') !important;
    transition: all 0.3s ease !important;
  }

  .action-btn:hover {
    background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.4)"') !important;
    border-color: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.3)" : "rgba(255, 255, 255, 0.5)"') !important;
    color: v-bind('theme === "light" ? "#333" : "#fff"') !important;
    transform: translateY(-2px);
    box-shadow: 0 0 15px v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(255, 255, 255, 0.3)"');
  }

  /* 表格视图样式 */
  .custom-table {
    background: transparent !important;
    border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.2)"') !important;
    border-radius: 8px !important;
    overflow: hidden;
  }

  .custom-table :deep(.el-table__header) {
    background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(16, 18, 45, 0.1)"') !important;
  }

  .custom-table :deep(.el-table__header th) {
    background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(16, 18, 45, 0.1)"') !important;
    border-bottom: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.3)"') !important;
    color: v-bind('theme === "light" ? "#333" : "#fff"') !important;
    font-weight: bold !important;
  }

  .custom-table :deep(.el-table__header-wrapper) {
    background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(16, 18, 45, 0.1)"') !important;
  }

  .custom-table :deep(.el-table__header tr) {
    background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(16, 18, 45, 0.1)"') !important;
  }

  .custom-table :deep(.el-table__body-wrapper) {
    background: transparent !important;
  }

  .custom-table :deep(.el-table__body td) {
    background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(16, 18, 45, 0.2)"') !important;
    border-bottom: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.1)"') !important;
    color: v-bind('theme === "light" ? "#333" : "#fff"') !important;
  }

  .custom-table :deep(.el-table__row) {
    background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(16, 18, 45, 0.2)"') !important;
    transition: all 0.3s ease !important;
  }

  .custom-table :deep(.el-table__row:hover) {
    background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(16, 18, 45, 0.3)"') !important;
  }

  .custom-table :deep(.el-table__row:hover td) {
    background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(16, 18, 45, 0.3)"') !important;
  }

  .custom-table :deep(.el-table__cell) {
    background: transparent !important;
  }

  .material-title {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .material-thumb {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    object-fit: cover;
  }

  .duration-tag {
    background: rgba(0, 170, 255, 0.2);
    color: #00aaff;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.9rem;
  }

  /* 图片视图样式 */
  .grid-view {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    padding: 10px;
  }

  .material-card {
    background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(255, 255, 255, 0.3)"');
    border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.4)"');
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
    position: relative;
    cursor: pointer;
  }

  .material-card:hover {
    transform: translateY(-4px);
    border-color: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.3)" : "rgba(255, 255, 255, 0.5)"');
    box-shadow: 0 0 20px v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(255, 255, 255, 0.3)"');
  }

  .material-card.selected {
    border-color: v-bind('theme === "light" ? "rgba(64, 158, 255, 0.5)" : "rgba(64, 158, 255, 0.6)"');
    box-shadow: 0 0 25px v-bind('theme === "light" ? "rgba(64, 158, 255, 0.2)" : "rgba(64, 158, 255, 0.3)"');
  }

  .material-checkbox {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    border-radius: 4px;
  }

  .material-preview {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 比例 */
  }

  .material-preview img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .duration-overlay {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0, 40, 80, 0.8);
    color: #00aaff;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.8rem;
  }

  .material-info {
    padding: 10px;
  }

  .material-info .material-title {
    color: v-bind('theme === "light" ? "#333" : "#fff"');
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* 分页样式 */
  .custom-pagination :deep(.el-pagination) {
    background: transparent;
  }

  .custom-pagination :deep(.el-pagination .el-pagination__total),
  .custom-pagination :deep(.el-pagination .el-pagination__jump) {
    color: v-bind('theme === "light" ? "#333" : "#fff"');
  }

  .custom-pagination :deep(.el-pagination .btn-prev),
  .custom-pagination :deep(.el-pagination .btn-next) {
    background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(255, 255, 255, 0.3)"');
    border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.4)"');
    color: v-bind('theme === "light" ? "#333" : "#fff"');
  }

  .custom-pagination :deep(.el-pagination .el-pager li) {
    background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(255, 255, 255, 0.3)"');
    border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.4)"');
    color: v-bind('theme === "light" ? "#333" : "#fff"');
  }

  .custom-pagination :deep(.el-pagination .el-pager li.active) {
    background: v-bind('theme === "light" ? "rgba(64, 158, 255, 0.2)" : "rgba(64, 158, 255, 0.3)"');
    border-color: v-bind('theme === "light" ? "rgba(64, 158, 255, 0.5)" : "rgba(64, 158, 255, 0.6)"');
    color: v-bind('theme === "light" ? "#333" : "#fff"');
  }

  .custom-pagination :deep(.el-pagination .el-pager li:hover) {
    background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.4)"');
    border-color: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.3)" : "rgba(255, 255, 255, 0.5)"');
    color: v-bind('theme === "light" ? "#333" : "#fff"');
  }

  /* 自定义复选框样式 */
  .custom-checkbox :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
    background-color: #00aaff;
    border-color: #00aaff;
  }

  .custom-checkbox :deep(.el-checkbox__inner:hover) {
    border-color: #00aaff;
  }

  /* 响应式布局优化 */
  @media screen and (max-width: 1366px) {
    .grid-view {
      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }
  }

  @media screen and (max-width: 768px) {
    .grid-view {
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }

    .folder-item {
      padding: 8px;
    }

    .folder-icon {
      width: 28px;
      height: 28px;
    }
  }
  </style>
